<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" width="992px" top="10vh" :destroy-on-close="true" :close-on-click-modal="false">
		<el-form ref="form" size="medium" :model="formData" :rules="formRules" label-width="80px" v-loading="loading" class="announcement_form">
			<el-form-item label="公告标题" prop="title">
				<el-input v-model="formData.title" :maxlength="64" show-word-limit></el-input>
			</el-form-item>
			<el-row :gutter="30">
				<el-col :span="12">
					<el-form-item label="发布时间" prop="releaseTime">
						<el-date-picker
							v-model="formData.releaseTime"
							type="date"
							value-format="yyyy-MM-dd"
							placeholder="选择发布日期"
							style="width: 100%"
						></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="序号" label-width="48px">
						<el-input-number v-model="formData.sort" controls-position="right" :min="1" style="width: 100%"></el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="公告内容">
				<quill-editor v-model="formData.content" upload-image></quill-editor>
			</el-form-item>
			<el-form-item label="公告附件" prop="siteId">
				<gx-file-uploader type="3" v-model="formData.siteId" multiple></gx-file-uploader>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleSubmitForm" :loading="btnLoading">确定</el-button>
		</template>
	</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { tbSysJournalismQueryInfo, tbSysJournalismAdd, tbSysJournalismUpdate } from '@/api/system/tbSysJournalism.js';
export default {
	props: {
		value: { type: Boolean, default: false },
		dataId: { type: String, default: '' }
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			formData: {},
			formRules: {
				title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
				content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
				releaseTime: [{ required: true, message: '请选择发布时间', trigger: 'change' }]
			},
			uploadFiles: [],
			btnLoading: false
		};
	},
	computed: {
		...mapGetters(['dictEnums', 'dictConst']),
		addOrEdit() {
			return !this.dataId;
		},
		dialogTitle() {
			return this.addOrEdit ? '添加公告' : '编辑公告';
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		async visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			if (this.addOrEdit) {
				this.formData = {};
			} else {
				this.formData = await this.getDataDetail();
			}
			this.$nextTick(() => {
				this.$refs['form'].clearValidate();
			});
		}
	},
	methods: {
		//获取公告详情
		async getDataDetail() {
			let params = { id: this.dataId, isRecord: '2' };
			let result = await tbSysJournalismQueryInfo(params).then((res) => res.data);
			if (result.code === '0') {
				return Promise.resolve(this.$detailData(result.data));
			}
		},

		//上传回调
		handleUploadFile(arr) {
			this.uploadFiles = [...arr];
		},

		//提交表单
		handleSubmitForm() {
			this.$refs['form'].validate((valid) => {
				if (!valid) return false;
				this.submitFormRequest();
			});
		},

		//格式化请求参数
		formatRequestParams() {
			let params = this.$lodash.cloneDeep(this.formData);
			params['del'] = '2';
			params['type'] = '1';
			params['isSave'] = '1';
			return params;
		},

		//提交表单请求
		async submitFormRequest() {
			let params = this.formatRequestParams();
			let callFunction = eval(this.addOrEdit ? tbSysJournalismAdd : tbSysJournalismUpdate);
			let result = await callFunction(params).then((res) => res.data);
			if (result.code === '0') {
				this.$showCustomMessage('success', `${this.addOrEdit ? '新增' : '修改'}公告成功`);
				this.$emit('refresh');
				this.visible = false;
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.announcement_form {
	margin: -15px;
	padding: 25px 25px 13px;
	overflow: auto;
}
</style>
